<template>
  <div>
    <van-button
      v-if="!isFollowed"
      :loading="followLoading"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      @click="onFollow"
      >关注</van-button
    >
    <van-button
      :loading="followLoading"
      class="follow-btn"
      round
      size="small"
      v-else
      @click="onFollow"
      >已关注</van-button
    >
  </div>
</template>

<script>
import { addFollow, deleteFollow } from '@/api/user.js'
export default {
  name: 'FollowUser',
  //   告诉父组件v-model,我修改props和$emit
  model: {
    prop: 'isFollowed', // 把原来的value修改
    event: 'set-isFollowed'
  },
  props: {
    isFollowed: Boolean,
    userId: [String, Number]
  },
  components: {},
  data () {
    return {
      followLoading: false
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    async onFollow () {
      this.followLoading = true
      if (this.isFollowed) {
        await deleteFollow(this.userId)
      } else {
        await addFollow(this.userId)
      }
      this.followLoading = false
      this.$emit('set-isFollowed', !this.isFollowed)
      this.$toast.success('操作成功')
    }
  }

}
</script>

<style>
</style>